<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style4.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.5, maximum-scale=10.0,user-scalable=yes">
    <title>LUZ CATS</title>
</head>
<!-- 
  配套手机首页尺寸如下：390×844，参考iPhone 12 Pro 
-->
<body>
    <div id="head">  
        <div class="pre"></div>  <!--左箭头-->
        <div class="next"></div>  <!--右箭头-->
        <div id="backgroundimg">  <!--主页轮播的图片-->
         <ul>
          <li><img src="images/p1_fig1.jpg" height="100%"/></li>
          <li><img src="images/p1_fig2.jpg" height="100%"/></li>
          <li><img src="images/p1_fig3.jpg" height="100%"/></li>
          <li><img src="images/p1_fig4.jpg" height="100%"/></li>
          <li><img src="images/p1_fig5.jpg" height="100%"/></li>
         </ul> 
        </div>
        <div id="swiper">  <!--主页图片对应的小标-->
          <span tabindex="0" role="button"></span>
          <span tabindex="0" role="button"></span>
          <span tabindex="0" role="button"></span>
          <span tabindex="0" role="button"></span>
          <span tabindex="0" role="button"></span>
         </div>
        <script>  /*主页图片轮播，按小图标手动变换*/
          var k=document.getElementById("backgroundimg");
          var s=document.getElementById("swiper");
          var lik=k.getElementsByTagName("li");
          var spa=s.getElementsByTagName("span");
          function change(x,y){  /*从lik[x]的图片切换到lik[y]的图片,小图标对应变化*/
             lik[x].style.opacity=0;
             lik[y].style.opacity=1;
             spa[x].style.background="black";
             spa[x].style.opacity=0.7;
             spa[y].style.background="rgb(36, 80, 107)";
             spa[y].style.opacity=1;
          }
          change(4,0); /*初始化*/
          var n=0;  /*初始化*/
          function lunbo(){
             n++;
             if(n==lik.length) {change(4,0); n=0;}
             else change(n-1,n);
          }
          var timer=setInterval(lunbo,2000);   /*自动轮播，2s一换*/
          document.getElementById("head").onmouseover=function(){    /*鼠标在上时停止轮播*/
            clearInterval(timer);
          }
          document.getElementById("head").onmouseout=function(){  /*鼠移开时继续轮播*/
            timer=setInterval(lunbo,2000);
          }
          //for(var i=0;i<=4;i++){  //用for循环不能实现，只能单个单个输入（不知道为什么）
            spa[0].onclick=function(){change(n,0); n=0;}  //实现通过点击小图标使得轮播图片转到相应图片
            spa[1].onclick=function(){change(n,1); n=1;}
            spa[2].onclick=function(){change(n,2); n=2;}
            spa[3].onclick=function(){change(n,3); n=3;}
            spa[4].onclick=function(){change(n,4); n=4;}
          //}
          var pre=document.getElementsByClassName("pre")[0];
          var next=document.getElementsByClassName("next")[0];
            pre.onclick=function(){
              if(n!=0){change(n,n-1);n--;}
              else {change(0,4); n=4;}
            }
            next.onclick=function(){
              if(n!=4){change(n,n+1);n++;}
              else {change(4,0); n=0;}
            }
        </script>
        <div id="header">  <!--最顶上的导航栏-->
          <div id="logo"><img src="images/logo.jpg" height="60%" alt=""/></div>
          <ul class="menu">
            <li><a class="mylink">关于我们</a></li>
            <li><a href="公告页.html" class="mylink" style="font-size:0.8rem !important;">信息公告</a></li>
            <li class="first">
              <a class="mylink">精彩活动∨</a>
              <ul class="secondmenu">
                <li class="li1"><a href="蹲领养.html" class="mylink">猫咪领养</a></li>
                <li>志愿活动</li>
              </ul>
            </li>
            <li><a class="mylink">猫咪日常</a></li>
            <li><a class="mylink">加入我们</a></li>
          </ul>
        </div>
    </div>

    <div style="margin-top:3%; text-align: center; width:100%; height: 10%; color:black;"> <!--about us部分-->
        <div style="font-weight:bolder; font-size:1.5rem;">ABOUT US</div>
        <div style="font-size:1rem">关于我们</div>
        <div style="font-size: 0.8rem; margin-top: 3%; line-height: 150%;">
          我们简称兰大猫协,
          是学生社团形式存在的流浪猫救助组织。<br>
          城关与榆中校区的猫都在我们的救助范围内。<br>
          我们为兰大的猫咪们创建了公众号和流浪猫救助群，
          发展多年来，围绕兰大的猫咪，我们开展了各种活动和服务。<br>
          <a class="more">MORE></a>
        </div>
    </div>

    <div style="margin-left:2%; overflow:hidden; width:96%; height:13%; background:rgb(36,80,107);"> <!--图片走马灯部分-->
        <marquee width="100%" direction="right" height="100%" scrollamount="60" onmouseover="this.stop()" onmouseout="this.start()">
        <img src="images/midle1.jpg" width="100%"/>
        <img src="images/midle2.jpg" width="100%"/>
        <img src="images/midle3.jpg" width="100%"/>
        <img src="images/midle4.jpg" width="100%"/>
        <img src="images/midle5.jpg" width="100%"/>
        </marquee>
    </div>

    <div style="margin-top:5%; width:100%; height:15%; background:rgb(36, 80, 107); color:#fff; overflow:hidden;">
        <div style="z-index:10; width:100%; height:auto; text-align: center; font-weight:bolder; font-size:1.1rem;"><br>TO HELP CATS AND MAKE BETTER LIFE</div>
        <div style="text-align: center; font-size:1.1rem; font-weight: lighter;">救助猫咪 美好生活</div>
        <div style="z-index:5; margin-left:7%; margin-top:3%; width:100%; height:90%;">
          <div class="subpic">
            <div class="subl"><img src="images/m1.png" width="100%" /></div>
            <div class="te">宣传</div>
          </div>
          <div class="subpic">
            <div class="subl"><img src="images/m2.png" width="100%"/></div>
            <div class="te">救助</div>
          </div>
          <div class="subpic">
            <div class="subl"><img src="images/m3.png" width="100%" /></div>
            <div class="te">投喂</div>
          </div>
          <div class="subpic">
            <div class="subl"><img src="images/m4.png" width="100%" /></div>
            <div class="te">管理</div>
          </div>
        </div>
        <div style="z-index:8; margin-left:5%; margin-top:-50%; width:100%; height:50%; color:#fff;">
          <div class="con">宣传校园猫咪，让更多人知道猫咪的困境</div>
          <div class="con">为需要就医的猫咪发布筹款</div>
          <div class="con">负责上学及假期期间校园猫咪的投喂工作</div>
          <div class="con">为校园中适合领养的猫咪寻找一个家</div>
        </div>
    </div>

    <div id="news">
        <div class="texiao">
          <div style="z-index:10; width:100%; height:auto; text-align: center; font-weight:bolder; font-size:1.5rem;">NEWS</div>
          <div style="font-size:1.3rem; margin-bottom: 5%; font-weight: lighter;">猫咪新闻</div>
        </div>
        <div id="newpics">
          <div class="newpic"><img src="images/n1.jpg" width="100%" alt=""/></div>
          <div class="newpic"><img src="images/n2.jpg" width="100%" alt=""/></div>
          <div class="newpic"><img src="images/n3.jpg" width="100%" alt=""/></div>
          <div class="newpic"><img src="images/n4.jpg" width="105%" alt=""/></div>
        </div>
        <div id="newtext">
          <div class="newpic" style="height:105% !important;"><br>橘玳夫妇<br><br>昔日恩爱夫妇大打出手</div>
          <div class="newpic" style="height:105% !important;"><br>骨子哥被动减肥<br><br>校园明星甲骨猪咪因为过于"沉重",<br>被管理员贴上通告</div>
          <div class="newpic" style="height:105% !important;"><br>白橘妈喜提通告<br><br>封校期间管理员温馨提醒:<br>白橘妈只可远观不可近赏</div>
          <div class="newpic" style="height:105% !important;"><br>小仙为校争光<br><br>为了养活校园猫咪,<br>美貌的小仙参加了京东读书的比赛</div>
        </div>
    </div>
  
    <script src="anime/anime.min.js"></script>
    <script>
    var newp=document.getElementsByClassName("newpic");
    var m=0;
    for(m=0;m<=3;m++){ (function(m){  
        newp[m].onmouseover=function(){
        anime({
            targets: newp[m],
            opacity:0,
            rotate:'1turn',
            duration:300,
            easing:'easeOutQuad'
        });
        }
        newp[m].onmouseout=function(){
        anime({
            targets: newp[m],
            opacity:1,
            rotate:'1turn',
            duration:300,
            easing:'easeOutQuad'
        });
        }
    })(m)}
    </script>

    <div class="contact">
        <div class="contact_text">
        如果你有好的想法<br>
        或者想要为校园里的猫猫尽一份力<br>
        快联系我们吧!<br>
          <div class="divsvg" style="margin-left: 70%; margin-top:-8%; width:40%; height:auto; float:left;">
            <svg viewBox="-3 -3 7 6" fill="none" style="width:20%">
              <path d="M2 0 L 0 2 L -2 0 M 0 2 L 0 -3" fill="none" border="1px" stroke="#fff"></path>
            </svg>
          </div>
            <div class="divsvg" style="margin-left:80%; margin-top:-8%; width:40%; height:auto; float:left;">
            <svg viewBox="-3 -3 7 6" fill="none" style="width:20%">
              <path d="M2 0 L 0 2 L -2 0 M 0 2 L 0 -3" fill="none" border="1px" stroke="#fff"></path>
            </svg>
          </div>
        </div>
        <div class="contact-form">
          <div class="info" style="width:30%; height:12%; margin-left:5%;">&nbsp姓名:&nbsp</div>
          <div class="info"  style="width:30%; height:12%; margin-left:5%">&nbsp邮箱:&nbsp</div>
          <div class="info"  style="width:70%; height:42%; margin-left:5%; ">&nbsp想说的话:&nbsp</div>
          <div id="send" class="hvr-back-pulse">发送</div>
        </div>
    </div>
  
    <script src="anime/anime.min.js"></script>
    <script>    <!--箭头的动画-->
        anime({
            targets: '.divsvg',
            translateY: '15px',
            duration: 300,
            loop: true,
            direction: 'alternate',
            easing: 'easeInCubic'
        });
    </script>

    <div class="footer">    <!--底部-->
      <div class="footlogo"><img src="images/logo.jpg" width="200%" alt=""/></div>
      <div class="foottext">
        <div style="height:50%; width:100%; margin-bottom: 8%">
          <img src="images/LZUlogo.svg" width="30%" alt="兰州大学">
        </div>
        <div class="foottext2">加入我们 &nbsp;｜ &nbsp; 联系我们</div>
         甘肃省兰州市天水南路222号 <br> 
         邮编: 730000<br>
         兰大猫咪 ZLU CATS.COM <br>
         ALL RIGHTS RESERVED 
      </div>
    </div>
</body>
</html> 